Fetch API 教程

概述

在现代 Web 开发中，与服务器进行数据交互是不可或缺的一部分。Fetch API 是一个强大的工具，允许我们在 JavaScript 中进行网络请求。它提供了一种简单、灵活的方式来获取资源，并且是基于 Promise 的，这使得处理异步操作变得更加直观。

本教程将带你深入了解 Fetch API 的工作原理，并通过实际代码示例和练习帮助你掌握这一重要技能。

1. Fetch API 基础

1.1 什么是 Fetch API？

Fetch API 是一个用于发起网络请求的接口。它允许你从服务器获取数据，发送数据，或者执行其他网络操作。Fetch API 是基于 Promise 的，这意味着你可以使用 .then() 和 .catch() 方法来处理请求的成功和失败。

1.2 基本语法

Fetch API 的基本语法如下：

fetch(url, options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

• url: 请求的 URL。
• options: 一个可选的对象，包含请求的配置，如方法、头信息、主体等。

1.3 示例：获取数据

让我们从一个简单的示例开始，使用 Fetch API 从服务器获取数据：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，我们向 jsonplaceholder 服务发送了一个 GET 请求，并期望返回一个包含文章的 JSON 数组。response.json() 方法将响应体解析为 JSON 格式。

2. 处理响应

2.1 检查响应状态

在处理响应之前，通常需要检查响应的状态码。你可以使用 response.status 属性来获取状态码，并根据状态码采取不同的操作。

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (response.status === 200) {
      return response.json();
    } else {
      throw new Error('Something went wrong on API server!');
    }
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

2.2 处理不同类型的响应

Fetch API 支持多种响应类型，如 JSON、文本、Blob 等。你可以根据需要选择合适的解析方法：

• response.json(): 解析 JSON 响应。
• response.text(): 解析文本响应。
• response.blob(): 解析二进制数据。

3. 发送数据

3.1 POST 请求

除了 GET 请求，Fetch API 还支持 POST、PUT、DELETE 等请求方法。以下是一个发送 POST 请求的示例：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在这个示例中，我们向服务器发送了一个包含 title、body 和 userId 的 JSON 对象。

3.2 其他请求方法

你可以使用类似的方式发送 PUT 和 DELETE 请求：

// PUT 请求
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: 1,
    title: 'foo',
    body: 'bar',
    userId: 1
  })
});

// DELETE 请求
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'
});

4. 处理错误

4.1 网络错误

Fetch API 不会在网络错误（如 DNS 查找失败、拒绝连接等）时抛出错误。你需要手动检查响应的状态码来判断请求是否成功。

4.2 自定义错误处理

你可以通过抛出错误来处理自定义错误情况：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('There was a problem with the fetch operation:', error));

5. 实践练习

5.1 练习：获取并显示用户列表

创建一个简单的 React 应用，使用 Fetch API 从 https://jsonplaceholder.typicode.com/users 获取用户列表，并将其显示在页面上。

import React, { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.error('Error:', error));
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

5.2 练习：创建一个简单的博客应用

创建一个博客应用，允许用户查看文章列表、查看单篇文章、创建新文章、编辑文章和删除文章。使用 Fetch API 与 jsonplaceholder 服务进行交互。

6. 总结

Fetch API 是现代 Web 开发中不可或缺的工具。通过本教程，你已经学习了如何使用 Fetch API 进行 GET 和 POST 请求，处理响应和错误，以及如何在 React 应用中使用 Fetch API。希望这些知识能够帮助你在实际项目中更好地与服务器进行数据交互。

7. 进一步学习

• Axios: 另一个流行的 HTTP 客户端库，提供了比 Fetch API 更高级的功能。
• React Query: 一个用于管理服务器状态的库，简化了数据获取和缓存。
• GraphQL 和 Apollo Client: 用于替代 REST API 的查询语言和客户端库。

继续探索这些工具和技术，将帮助你构建更强大、更高效的 Web 应用。